<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    什么是盒子模型?
      盒子模型就是html标签/元素的组成模型
    
    盒子模型包括:
        1.content(内容部分)：内容存放的地方
        2.padding(内填充)
        3.border(边框)
        4.margin(外边距)：元素与元素之间的距离
    默认情况元素的尺寸：content + padding + border
  -->
  <!-- 
    改变其盒子模型
        box-sizing: content-box;(内容盒子，默认情况) 默认
                    计算尺寸:content + padding + border， 往外算
        box-sizing: border-box;(边框盒子),
                    计算尺寸：设置width、height就是元素的尺寸，
                              padding和border会影响content内容的尺寸 ，往里算
  -->
  <div style="
  background-color: pink;
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 1px solid black;
    margin: 20px;
    box-sizing: border-box;
  ">
    这是文本 </div>
    <div style="width: 100px;height: 100px;background-color: bisque;"></div>
</body>
</html>